<template>
  <view class="h_body success_html" id="s_canvas">
    <view class="h_card success">
      <image src="@/assets/images/index/icon_xiadanchenggong.png"></image>
      <view class="text">
        <view class="title">下单成功</view>
        <view class="text_body">请将【发货码】给予值班员，确认货物信息</view>
      </view>
    </view>
    <view class="h_card success_body">
      <view class="o">发货码</view>
      <view class="s">{{ sendGoodsStore.success.sendCode }}</view>
      <view class="t">
        <view class="left" @click="copyCode(sendGoodsStore.success.sendCode)">复制发货码</view>
        <view class="right" @click="saveCodeNew">保存到相册</view>
      </view>
    </view>


    <!-- <orderBody></orderBody> -->
    <view class="success_foot">
      <view class="button left" @click="look">查看订单</view>
      <view class="button right" @click="onceAgin">再来一单</view>
    </view>

    <view style="position:fixed;left:0;top:99999999rpx">
      <canvas style="width: 1404rpx;height: 2000rpx;" canvas-id="bcfhm"></canvas>
    </view>
  </view>
</template>
<script lang="ts" setup>
import useSendGoodsStore from "../../store/sendGoods";
import Taro, {getCurrentInstance, useDidShow} from "@tarojs/taro";
import { orderList } from "@/@api";
import { reset } from "./reset";
import { ref } from "vue";
import orderBody from "@/components/orderBody";
import useMyOrderStore from "@/store/myOrder";
//import html2canvas from '@/utils/html2canvas.js';

useDidShow(async () => {
  reset();
  let res = await orderList(
      {
        ssoId: sendGoodsStore.success.orderId,
        //ssoId: '41057',//先写死
      },
      1,
      1
  )
  orderInfo.value = res[0]
  console.log(orderInfo.value)
})
const orderStore = useMyOrderStore()
const orderInfo = ref<any>({})
const { page } = getCurrentInstance()
let widget:any

const copyCode = (val)=>{
  Taro.setClipboardData({
    data: val.toString()
  })
}
async function look() {
  orderStore.orderList = orderInfo.value
  Taro.navigateTo({
    url: "/pages/myOrder/order",
  });
}
function onceAgin() {
  Taro.redirectTo({
    url: "/pages/sendGoods/index",
  });
}
const sendGoodsStore = useSendGoodsStore();



const saveCode = (val)=>{
  widget = page.selectComponent('.widget')
  const p1 = widget.renderToCanvas({
    wxml: `
     <view>
       <view class="codeInfo">
          <text class="label">发货码</text>
          <text class="value">${val}</text>
       </view>
     </view>
    `,
    style: {
      codeInfo: {
        width: 326,
        height: 110,
        backgroundColor: '#fff',
        flexDirection: 'column',
        alignItems: 'center',
      },
      label: {
        color: '#252525',
        fontSize: 14,
        width: 326,
        height: 14,
        textAlign: 'center',
        verticalAlign: 'center',
        marginTop: 18,
      },
      value: {
        color: '#0966ff',
        fontSize: 20,
        width: 326,
        height: 20,
        textAlign: 'center',
        verticalAlign: 'center',
        marginTop: 20,
      },
    },
  })
  p1.then((res)=>{
    getFilePath()
  }).catch((err)=>{
    console.log(err)
  })
}

const saveCodeNew = ()=>{
  // const receiverAddress = (orderInfo.value.fromProvince + orderInfo.value.fromCity + orderInfo.value.fromArea + orderInfo.value.fromAdd) || '-'
  // const shipperAddress = (orderInfo.value.toProvince + orderInfo.value.toFromCity + orderInfo.value.toFromArea + orderInfo.value.toFromAdd) || '-'
  const shipperAddress = orderInfo.value.toFromAdd || '-'
  const receiverAddress = orderInfo.value.fromAdd || '-'

  const ctx = Taro.createCanvasContext('bcfhm')

  ctx.fillStyle = '#fff'
  ctx.fillRect(0,0,752, 2000)

  ctx.drawImage('../../assets/images/index/shareqr/qrhead.png', 0, 0, 702, 112)

  ctx.strokeStyle = '#e3e7ec'
  ctx.lineWidth = 1
  ctx.strokeRect(16, 128, 670, 88)

  ctx.drawImage('../../assets/images/codeList/network_house.png', 40, 154, 36, 36)

  ctx.fillStyle = '#252525'
  ctx.font = "bold 28px 黑体"
  ctx.fillText(orderInfo.value.destinationBranchName, 96, 182 )

  ctx.strokeStyle = '#e3e7ec'
  ctx.lineWidth = 1
  ctx.strokeRect(16, 216, 670, 224)

  ctx.fillStyle = '#252525'
  ctx.font = "bold 32px 黑体"
  ctx.fillText('发货码', 302, 296 )

  ctx.fillStyle = '#0966ff'
  ctx.font = "bold 64px 黑体"
  ctx.fillText(sendGoodsStore.success.sendCode.toString().slice(0,4) + ' ' + sendGoodsStore.success.sendCode.toString().slice(4), 204, 372 )

  ctx.strokeStyle = '#e3e7ec'
  ctx.lineWidth = 1
  ctx.strokeRect(16, 440, 670, 224)

  ctx.beginPath()
  ctx.arc(60,500,20,0, 2*Math.PI )
  ctx.fillStyle = '#0966ff'
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.arc(60,600,20,0, 2*Math.PI )
  ctx.fillStyle = '#0ec767'
  ctx.fill()
  ctx.closePath()

  ctx.beginPath()
  ctx.fillStyle = '#fff'
  ctx.font = "20px 黑体"
  ctx.fillText('发', 50, 508 )
  ctx.fillText('收', 50, 608 )
  ctx.closePath()

  ctx.fillStyle = '#252525'
  ctx.font = "26px 黑体"
  ctx.fillText(`${orderInfo.value.shipper}  ${orderInfo.value.shipperMobile||'-'}`, 96, 492, 560)
  ctx.fillText(`${orderInfo.value.receiver}  ${orderInfo.value.receiverMobile||'-'}`, 96, 592, 560)

  ctx.fillStyle = '#999'
  ctx.font = "22px 黑体"
  ctx.fillText(shipperAddress, 96, 532, 560)
  ctx.fillText(receiverAddress, 96, 632, 560)

  ctx.strokeStyle = '#e3e7ec'
  ctx.lineWidth = 1
  ctx.strokeRect(16, 664, 670, 72 + (orderInfo.value.goodsInfo.length-1) * 48)

  ctx.fillStyle = '#666'
  ctx.font = "24px 黑体"
  ctx.fillText('货物信息', 40, 708)

  ctx.fillStyle = '#252525'
  ctx.font = "24px 黑体"
  orderInfo.value.goodsInfo.forEach((item,index)=>{
    ctx.fillText(`${item.goodsName}${item.goodsNumber}件，${item.weigh}kg，${item.goodsVolume}m³，${item.packing}`, 176, 708 + index*48)
  })

  ctx.draw()

  Taro.canvasToTempFilePath({
    canvasId: 'bcfhm',
    height:  752 + (orderInfo.value.goodsInfo.length-1) * 48,
    success: (res)=>{
      console.log(res.tempFilePath)
      Taro.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: res => {
          Taro.showToast({
            title: '成功保存到相册',
            icon: 'success'
          })
        }
      })
    }
  })
}

const getFilePath = ()=>{
  const p2 = widget.canvasToTempFilePath()
  p2.then(res => {
    console.log(res.tempFilePath)
    let imageUrl = res.tempFilePath

    Taro.saveImageToPhotosAlbum({
      filePath: imageUrl,
      success: res => {
        Taro.showToast({
          title: '成功保存到相册',
          icon: 'success'
        })
      }
    })


  })
}

</script>
<style lang="scss">
.success_html {
  padding-bottom: 24rpx;
  box-sizing: border-box;
  height: 1072rpx !important;
}
.success {
  margin-top: 24rpx;
  height: 148rpx;
  display: flex;
  padding: 32rpx;
  box-sizing: border-box;
  align-items: center;
  image {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
  }
  .text {
    height: 84rpx;
    .title {
      font-family: PingFang SC;
      font-size: 32rpx;
      color: #07c160;
      margin-bottom: 8rpx;
    }
    .text_body {
      font-family: PingFang SC Medium;
      font-size: 22rpx;

      color: #252525;
    }
  }
}
.success_body {
  margin-top: 24rpx;
  height: 288rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  .o {
    font-size: 28rpx;

    color: #252525;
  }
  .s {
    font-size: 48rpx;
    /* 主色/蓝 */
    color: #0966ff;
    width: 242rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;
  }
  .t {
    display: flex;
    font-family: PingFangSC-Regular;
    font-size: 24rpx;
    .left {
      width: 166rpx;
      height: 56rpx;
      border-radius: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1rpx solid #c4c4c4;
      color: #252525;
      margin-right: 16rpx;
    }
    .right {
      width: 166rpx;
      height: 56rpx;
      border-radius: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1rpx solid #0966ff;
      color: #0966ff;
    }
  }
}

.success_foot {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 128rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340rpx;
    height: 88rpx;
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    border-radius: 200rpx;
  }
  .left {
    width: 339rpx !important;
    height: 87rpx !important;
    border: 1rpx solid #c4c4c4;
    background: white;
    margin-right: 24rpx;
  }
  .right {
    background: #0966ff;
    color: #ffffff;
  }
}
</style>
